let tableIns;
let tree;
let element;
let form;
let transfer;
let pIds = [];
layui.use(['element', 'form', 'transfer', 'table', 'layer', 'laydate', 'tree', 'util'], function () {
    // 声明
    element = layui.element;
    form = layui.form;
    transfer = layui.transfer;
    tree = layui.tree;
    let table = layui.table;
    let auth_token = localStorage.getItem('auth_token');
    var headers = {
        // Basic bearer
        'Authorization': auth_token
        //'Authorization':'Basic '+auth_token
    }
    // 隐藏编辑及诶按
    tableIns = table.render({
        elem: '#userTable'
        , url: '/u/v1/queryUserPage'
        , method: 'POST'
        // JWT
        , headers: headers
        , where: {
            queryByLoginName: ''
        }
        , parseData: function (res) { //res 即为原始返回的数据
            let result = {};
            if (res.code === '00000') {
                result = {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                }
            } else {
                result = {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": 0, //解析数据长度
                    "data": {} //解析数据列表
                }
            }
            return result;
        }
        , page: true
        , limit: 10
        , limits: [10, 20, 30, 40]
        //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cellMinWidth: 80
        //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        , toolbar: '#toolbarUser' // 开启头部工具栏，并为其绑定左侧模板
        // 自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        , defaultToolbar: ['filter', 'exports']
        , title: '用户数据表'
        // width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            , {field: 'userId', title: 'ID', sort: true}
            , {field: 'userName', title: '用户名'}
            , {
                field: 'userSex', title: '性别', sort: true, templet: function (row) {
                    // 0-男；1-女 2-其他
                    if (row.userSex == 0) {
                        return '男';
                    } else if (row.userSex == 1) {
                        return '女';
                    } else {
                        return '其他';
                    }
                }
            }
            , {field: 'userPhone', title: '联系方式'}
            , {field: 'userAccount', title: '登录账户'}
            , {field: 'userLevelId', title: 'VIP', hide: true}
            , {field: 'userLeveName', title: 'VIP'}
            , {field: 'userLoginTime', title: '最后登录时间'}
            , {field: 'userRemark', title: '备注'}
            , {field: 'roleIds', title: '角色字符串', hide: true}
            , {fixed: 'right', title: '操作', toolbar: '#barUser', width: 200}
        ]]
    });

    //头工具栏事件
    table.on('toolbar(test)', function (obj) {
        switch (obj.event) {
            case 'addData':
                // 重置表单
                userEditSub(headers, 'add', null)
                break;
            case 'query':
                let queryByLoginName = $("#queryByLoginName").val();
                let query = {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , done: function (res, curr, count) {
                        //完成后重置where，解决下一次请求携带旧数据
                        // this.where = {};
                    }
                };
                if (!queryByLoginName) {
                    queryByLoginName = "";
                }
                //设定异步数据接口的额外参数
                query.where = {userName: queryByLoginName};
                tableIns.reload(query);
                $("#queryByLoginName").val(queryByLoginName);
                break;
            case 'reload':
                tableIns.reload();
                break;
        }
        ;
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {
            layer.confirm('确认删除吗？', function (index) {
                // 向服务端发送删除指令
                $.delete("/u/v1/delete?userId=" + data.userId, {}, headers, function (data) {
                    if (data.code === '00000') {
                        layer.msg('删除成功', {icon: 6});
                    } else {
                        layer.msg(data.msg, {icon: 6});
                    }
                    // 表格刷新
                    tableIns.reload();
                    layer.close(index);
                })
            });
        } else if (obj.event === 'edit') {
            // 重置表单
            userEditSub(headers, 'edit', data)
        } else if (obj.event === 'editAuth') {
            userEditAuthSub(headers, data)
        }
    });

});

/**
 * 用户编辑
 */
function userEditSub(headers, type, userData) {
    // 重置表单
    $("#userForm")[0].reset();
    layer.open({
        type: '1',
        content: $('.userEditDiv'),
        title: '编辑',
        area: ['850px', '500px'],
        btn: ['保存', '取消'],
        closeBtn: '1',
        success: function (layero, index) {
            // 初始化
            if (type === 'edit') {
                //回显操作表单
                $("#userForm").form(userData);
                // 性别
                if (userData.userSex == 0) {
                    $("input[name='userSex'][value='0']").attr("checked", true);
                } else if (userData.userSex == 1) {
                    $("input[name='userSex'][value='1']").attr("checked", true);
                }
                form.render();
            }
        },
        btn1: function (index, layero) {
            if (!validateUserCode()) {

            } else {
                //编辑回调
                layer.close(index);
                var userEditLoadIndex = layer.load(2);
                let userForm = $("#userForm").serializeObject();
                $.DPost("/u/v1/saveOrUpdate", userForm, headers, function (data) {
                    if (data.code === '00000') {
                        layer.msg("保存成功", {icon: 1, time: 2000}, function () {
                            layer.close(userEditLoadIndex);
                            // 关闭当前页面
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            // 刷新父页面table(连同查询条件)：
                            // parent.layui.table.reload('userTable');
                            // 表格刷新
                            tableIns.reload();
                        });
                    } else {
                        layer.msg("保存失败", {icon: 1, time: 2000}, function () {
                            layer.close(userEditLoadIndex);
                            // 关闭当前页面
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            // 刷新父页面table(连同查询条件)：
                            // parent.layui.table.reload('userTable');
                            // 表格刷新
                            tableIns.reload();
                        });
                    }

                });
            }
        },
        btn2: function (index, layero) {
            //取消回调
        }
    })
}

/**
 * 绑定用户角色菜单
 */
function userEditAuthSub(headers, userData) {
    layer.open({
        type: '1',
        content: $('.userEditAuthDiv'),
        title: '绑定权限',
        area: ['850px', '500px'],
        btn: ['保存', '取消'],
        closeBtn: '1',
        success: function (layero, index) {
            // 用户角色
            loadRoleTree(headers, userData.userId)
            // 用户菜单
            let roleIds = userData.roleIds;
            if (roleIds.length > 0) {
                loadPermissionTree(headers, roleIds.split(','))
            }else{
                loadPermissionTreeUser(headers, userData.userId)
            }

        },
        btn1: function (index, layero) {
            //编辑回调
            layer.close(index);
            var userEditLoadIndex = layer.load(2);
            // 获取选中的角色
            let checkRoleData = transfer.getData('userRoleTree');
            let roleIds = [];
            for (let i = 0; i < checkRoleData.length; i++) {
                roleIds.push(checkRoleData[i].value)
            }
            // 获得选中的权限菜单
            geyAuthMenu(tree.getChecked('userMenuTree'))
            let params = {
                'roleIds': roleIds.join(),
                'pIds': pIds.join(),
                'userId': userData.userId
            }
            // 获取ID 字符串拼接
            // 处理数据
            $.DPost("/u/v1/bindAuth", params, headers, function (data) {
                if (data.code === '00000') {
                    layer.msg("绑定成功", {icon: 1, time: 2000}, function () {
                        layer.close(userEditLoadIndex);
                        // 关闭当前页面
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        // 刷新父页面table(连同查询条件)：
                        //parent.layui.table.reload('userTable');
                        // 表格刷新
                        tableIns.reload();
                    });
                } else {
                    layer.msg("绑定失败", {icon: 1, time: 2000}, function () {
                        layer.close(userEditLoadIndex);
                        // 关闭当前页面
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        // 刷新父页面table(连同查询条件)：
                        // parent.layui.table.reload('userTable');
                        // 表格刷新
                        tableIns.reload();
                    });
                }

            });
        },
        btn2: function (index, layero) {
            //取消回调
        }
    })
}

/**
 * 加载用户角色
 */
function loadRoleTree(headers, userId) {
    let data = {
        'userId': userId
    }
    $.DPost("/r/v1/queryRoleList", data, headers, function (data) {
        let roleAllData = [];
        let roleHaveData = [];
        let roleIds = [];
        for (let role of data.data) {
            let tree = {
                title: role.title
                , value: role.value
                , disabled: role.disabled
            };
            //回显用户权限
            if (role.checked == true) {
                roleHaveData.push(role.value)
                roleIds.push(role.value)
            }
            roleAllData.push(tree);
        }
        transfer.render({
            elem: '#userRoleTree'
            , id: 'userRoleTree'
            , title: ['未拥有', '已拥有']
            , data: roleAllData // 所有角色
            , value: roleHaveData // 拥有角色
            , width: 150 //定义宽度
            , height: 210 //定义高度
            , success: function () {
                // 初始化调用获取用户权限菜单
                loadPermissionTree(headers, roleIds)
            }
            , onchange: function (obj, index) {
                // 获取右侧(选中)数据
                let checkData = transfer.getData('userRoleTree')
                roleIds = []
                for (let i = 0; i < checkData.length; i++) {
                    roleIds.push(checkData[i].value)
                }
                if (roleIds.length > 0){
                    loadPermissionTree(headers, roleIds)
                }

            }
        })

    });
}


/**
 * 加载用户权限菜单
 */
function loadPermissionTree(headers, roleIds) {
    if (roleIds.length > 0) {
        roleIds = roleIds.join();
    }
    let data = {
        'roleIds': roleIds
    }
    //获取菜单数据
    $.DPost("/p/v1/queryMenuByRole", data, headers, function (data) {
        //数据说明：id对应id，title对应menuName，href对应menuPath
        let treeData = [];
        for (let p of data.data) {
            let tree = {
                field: p.title
                , title: p.title
                , id: p.id
                , href: p.href
                , spread: true // 节点是否初始展开
                , children: p.children
            };
            //回显用户权限
            if (p.checked == true) {
                tree.checked = true;
            }
            treeData.push(tree);
        }
        //开启节点操作图标
        tree.render({
            elem: '#userMenuTree'
            , id: 'userMenuTree'
            , data: [{
                title: '系统权限根节点'
                , href: "/"
                , id: 0
                , spread: true
                , children: treeData
            }]
            , showCheckbox: true  //是否显示复选框
            // , oncheck: roleChangeMenu
        });
    });
}

/**
 * 加载用户权限(根据用户ID)
 */
function loadPermissionTreeUser(headers, userId) {
    let data = {
        'userId': userId
    }
    //获取菜单数据
    $.DPost("/p/v1/queryMenuByUser", data, headers, function (data) {
        //数据说明：id对应id，title对应menuName，href对应menuPath
        let treeData = [];
        for (let p of data.data) {
            let tree = {
                field: p.title
                , title: p.title
                , id: p.id
                , href: p.href
                , spread: true // 节点是否初始展开
                , children: p.children
            };
            //回显用户权限
            if (p.checked == true) {
                tree.checked = true;
            }
            treeData.push(tree);
        }
        //开启节点操作图标
        tree.render({
            elem: '#userMenuTree'
            , id: 'userMenuTree'
            , data: [{
                title: '系统权限根节点'
                , href: "/"
                , id: 0
                , spread: true
                , children: treeData
            }]
            , showCheckbox: true  //是否显示复选框
            // , oncheck: roleChangeMenu
        });
    });
}

/**
 * 表单验证
 */
function validateUserCode() {
    // 用户名 账号 密码 性别 联系方式
    var userName = $('#userName').val();
    var userAccount = $('#userAccount').val();
    var userSex = $('input[name="userSex"]:checked').val();
    var userPhone = $('#userPhone').val();
    var userPassword = $('#userPassword').val();

    if ($.trim(userName) == '' || $.trim(userName).length <= 0) {
        layer.alert("用户名不能为空", {icon: 5});
        return false;
    }
    if ($.trim(userAccount) == '' || $.trim(userAccount).length <= 0) {
        layer.alert("账号不能为空", {icon: 5});
        return false;
    }
    var reg = /^[0-9a-zA-Z]/;
    for (i = 0; i < $.trim(userAccount).length; i++) {
        if (!reg.test($.trim(userAccount))) {
            layer.alert("账号只能输入字母或数字", {icon: 5});
            return false;
        }
    }
    if ($.trim(userAccount).length < 4 || $.trim(userAccount).length > 16) {
        layer.alert("账号只能输入4-16个字符", {icon: 5})
        return false;
    }
    if ($.trim(userPassword) == '' || $.trim(userPassword).length <= 0) {
        layer.alert("密码不能为空", {icon: 5});
        return false;
    }
    if ($.trim(userPassword).length < 6 || $.trim(userPassword).length > 12) {
        layer.alert("密码必须在 6-12 个字符。", {icon: 5});
        return false;
    }
    if ($.trim(userSex) == '' || $.trim(userSex).length <= 0) {
        layer.alert("用户性别不能为空", {icon: 5});
        return false;
    }
    if ($.trim(userPhone) == '' || $.trim(userPhone).length <= 0) {
        layer.alert("联系方式不能为空", {icon: 5});
        return false;
    }
    return true;
}

function geyAuthMenu(data) {
    for (let i = 0; i < data.length; i++) {
        if (data[i].id != 0) {
            pIds.push(data[i].id)
        }
        if (data[i].children){
            geyAuthMenu(data[i].children)
        }else {
            continue;
        }
    }
    return
}



